<template>
  <div>
    <div class="container">
      <Header />
      <NavBar />
      <div class="product_box" :class="{ is_fixed: isFixed }">
        <div class="nav-bar">
          <div class="product_container">
            <h2>{{ productTitle }}</h2>
            <div class="con">
              <div class="left">
                <span>|</span>
                <a href="">{{ productDesc }}</a>
              </div>
              <div class="right">
                <a href="">概述页</a>
                <span>|</span>
                <a href="">参数</a>
                <span>|</span>
                <a href="">F码通道</a>
                <span>|</span>
                <a href="">用户评价</a>
              </div>
            </div>
          </div>
          <div id="boxFixed"></div>
        </div>
      </div>
      <div class="detail">
        <div class="goods_box">
          <!-- 左边商品图片 -->
          <div class="img_left">
            <a-carousel autoplay>
              <div v-for="item in productImg" :key="item.id">
                <img v-lazy="item.path" alt="" />
              </div>
            </a-carousel>
          </div>
          <!-- 右边商品详情介绍 -->
          <div class="product-con">
            <div class="goods_title">
              <h2>{{ productTitle }}</h2>
            </div>
            <div class="goods_desc">
              <span>「购机最高享24期分期免息；+949元得Micare保障服务」</span>
              {{ productDesc }}
            </div>
            <div class="company-info"><p>小米自营</p></div>
            <div class="price-info">
              <p>{{ productPrice }}元</p>
            </div>
            <div class="line"></div>
            <!-- 地址框 -->
            <div class="address-box">
              <div class="product-address">
                <div class="address-con">
                  <div>
                    <div class="address-info">
                      <span>北京</span>
                      <span>北京市</span>
                      <span>海淀区</span>
                      <span>清河街道</span>
                      <a href="">修改</a>
                    </div>
                  </div>
                  <div class="info">
                    <span>有现货</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 选择框 -->
            <div class="buy-option">
              <div class="buy-box">
                <div class="option-box"></div>
                <div class="version_title"><h2>选择版本</h2></div>
                <ul class="clearfix">
                  <li
                    v-for="(item, index) in versionList"
                    :key="index"
                    :class="{ checked: versionIndex == index }"
                    @click="changeVersion(index)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
              <div class="buy-box">
                <div class="option-box"></div>
                <div class="version_title"><h2>选择颜色</h2></div>
                <ul class="clearfix">
                  <li
                    v-for="(item, index) in colorVersion"
                    :key="index"
                    :class="{ checked: colorIndex == index }"
                    @click="changeColor(index)"
                  >
                    {{ item }}
                  </li>
                </ul>
              </div>
            </div>
            <!-- 价格框 -->
            <div class="selected-list">
              <ul>
                <li>
                  {{ productTitle }} {{ versionText }}
                  {{ colorText }}
                  <span>{{ productPrice }}元</span>
                </li>
              </ul>
              <div class="total-price">总计:{{ productPrice }}元</div>
            </div>
            <!-- 按钮 -->
            <div class="btn-box">
              <div class="sale-btn">
                <button @click="toOrder">加入购物车</button>
              </div>
              <div class="favorite-btn">
                <button>喜欢</button>
              </div>
            </div>
            <div class="tipLogo">
              <span>小米自营</span>
              <span>小米发货</span>
              <span>7天无理由退货</span>
              <span>运费说明</span>
              <span>企业信息</span>
              <span>售后服务政策</span>
              <span>7天价格保护</span>
            </div>
          </div>
        </div>
      </div>
      <div class="section-box">
        <div class="section-title">
          <h3>价格说明</h3>
        </div>
        <div class="img-box">
          <img src="/images/detailBg.png" alt="" />
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import NavBar from "../components/NavBar.vue";
import Footer from "../components/Footer.vue";
import { getAddCart } from "@/assets/js/request.js";
import { getGoods } from "@/assets/js/request.js";
import { getProductDetail } from "@/assets/js/request.js";
import { getCartInfo } from "../assets/js/request";
export default {
  data() {
    return {
      product: [],
      productImg: [],
      productId: "",
      productList: "",
      productTitle: "",
      productDesc: "",
      productPrice: "",
      versionList: ["8GB+128GB", "12GB+256GB", "8GB+256GB", "12GB+512GB"],
      colorVersion: ["陶瓷黑", "影青灰", "陶瓷白"],
      versionIndex: 0,
      colorIndex: 0,
      versionText: "8GB+128GB",
      colorText: "陶瓷黑",
      isFixed: false,
      offsetTop: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    this.$nextTick(() => {
      //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
      this.offsetTop = document.querySelector("#boxFixed").offsetTop;
    });
    this.getProduct();
  },
  components: {
    Header,
    NavBar,
    Footer,
  },

  methods: {
    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop ? true : false;
    },
    //获取商品信息
    getProduct() {
      let id = this.$route.params.id;
      getProductDetail(id).then((item) => {
        console.log(item);
        this.productTitle = item.name;
        this.productDesc = item.desc;
        this.productPrice = item.price;
        this.productImg = item.s_goods_photos;
      });
    },
    //选择版本型号
    changeVersion(index) {
      this.versionIndex = index;
      this.versionText = this.versionList[index];
    },
    //选择颜色型号
    changeColor(index) {
      this.colorIndex = index;
      this.colorText = this.colorVersion[index];
    },
    //将商品信息渲染到订单页面
    toOrder() {
      let token = sessionStorage.getItem("token");
      if (token) {
        let id = this.$route.params.id;
        getAddCart({
          goods_id: id,
          num: 1,
          project_id: 7,
        }).then((res) => {
          console.log(res);
          this.$router.push(`/cart`);
        });
      } else {
        alert("请先登录账号");
        this.$router.push(`/login`);
      }
    },
  },
  destroyed() {
    //回调中移除监听
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>


<style lang="scss" scoped>
@import "../assets/scss/reset.css";
.product_box {
  position: relative;
  z-index: 4;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 5px 5px rgb(0 0 0/7%);
}
.nav-bar {
  position: relative;
  height: 63px;
  width: 100%;
  margin-top: 0;
  color: #616161;
}
.product_container {
  width: 1226px;
  margin-left: auto;
  margin-right: auto;
  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 400px;
    line-height: 60px;
    color: #424242;
    float: left;
  }
  .left {
    float: left;
    margin-left: 5px;
    font-size: 12px;
    margin-top: 21px;
    span {
      margin: 0.5em;
      color: #424242;
    }
    a {
      color: #616161;
    }
  }
  .right {
    float: right;
    margin: 20px 0 0 0;
    span {
      margin: 0.5em;
      color: #424242;
    }
    a {
      color: #616161;
    }
  }
}
.goods_box {
  display: flex;
  justify-content: center;
  padding-top: 32px;
  padding-bottom: 12px;
  width: 1226px;
  margin-right: auto;
  margin-left: auto;
  // display: flex;
  .img_left {
    margin-right: 50px;
    width: 600px;
    position: relative;
    img {
      width: 450px;
      height: 430px;
      border: 0;
      margin: 0 auto;
    }
  }
  .product_con {
    flex: 1;
    margin-left: 20px;
    // text-align: left;
    h2 {
      // display: block;
      margin: 0;
      padding: 0;
      font-size: 24px;
      font-weight: 400;
      color: #212121;
      float: left;
    }
  }
  .goods_title {
    font-size: 16px;
    text-align: left;
    h2 {
      margin: 0;
      padding: 10px 0;
    }
  }
  .goods_desc {
    color: #b0b0b0;
    text-align: left;
    span {
      color: orangered;
      text-align: left;
    }
  }
  .company-info {
    margin-top: 15px;
    text-align: left;
    color: orangered;
    margin-bottom: 0;
  }
  .price-info {
    text-align: left;
    display: block;
    font-size: 18px;
    line-height: 1;
    color: orangered;
    padding: 12px 0 10px;
  }
  .line {
    margin-top: 5px;
    border: 1px solid #e0e0e0;
  }
  .address-box {
    margin-top: 20px;
    .product-address {
      padding: 30px 50px;
      position: relative;
      background: #fafafa;
      border: 1px solid #e0e0e0;
    }
    .address-info {
      float: left;
      span {
        display: inline-block;
        margin-right: 14px;
      }
      a {
        margin: 0;
        color: orangered;
        // float: left;
      }
    }
    .info {
      display: inline-block;

      .desc span {
        display: inline-block;
        margin-right: 14px;
      }
    }
  }
}
.buy-option {
  // display: block;
  width: 600px;
  .buy-box {
    width: 680px;
    margin-bottom: 30px;
    position: relative;
    text-align: left;
    .version_title {
      font-size: 12px;
      margin-top: 20px;
      display: flex;
    }
    ul {
      margin: 0;
      padding: 0;
      // display: flex;
      li {
        margin-right: 12px;
        margin-top: 10px;
        line-height: 42px;
        position: relative;
        border: 1px solid #e0e0e0;
        list-style: none;
        cursor: pointer;
        transition: all 0.2s ease;
        float: left;
        width: 292px;
        font-size: 16px;
        text-align: center;
        &.checked {
          color: #ff6700;
          border: 1px solid #ff6700;
        }
        a {
          color: #666;
        }
      }
    }
  }
}
.selected-list {
  background-color: #f9f9fa;
  padding: 30px;
  margin-bottom: 30px;
  ul {
    margin: 0;
    padding: 0;
    li {
      margin-top: 0;
      list-style: none;
      line-height: 30px;
      color: #616161;
      text-align: left;
      span {
        float: right;
      }
    }
  }
  .total-price {
    color: orangered;
    font-size: 24px;
    padding-top: 20px;
    text-align: left;
  }
}
.btn-box {
  margin: 10px 0 20px 0;
  display: flex;
  .sale-btn {
    margin: 5px;
    button {
      display: block;
      width: 230px;
      height: 50px;
      background-color: #ff6700;
      border: none;
      color: white;
    }
  }
  .favorite-btn {
    margin: 5px;
    button {
      display: block;
      width: 100px;
      height: 50px;
      background-color: #b0b0b0;
      border: none;
      color: white;
    }
  }
  .tipLogo {
    display: inline-block;
  }
}
.tipLogo {
  width: 350px;
  margin-top: 10px;
  text-align: left;
  span {
    margin-right: 10px;
    line-height: 20px;
    color: #666;
  }
}
.section-box {
  margin-top: 50px;
  width: 100%;
  height: 300px;
  margin: auto;
  margin-right: auto;
  margin-left: auto;
  background: rgb(245, 245, 245);
  .section-title h3 {
    font-size: 22px;
    font-weight: 400px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 145px;
    padding: 1em 0;
    text-align: left;
  }
  .img-box {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    img {
      width: 1226px;
      height: 200px;
      margin: 0 auto;
    }
  }
}

/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
.is_fixed {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}
</style>
